<template>
    <div class="photo_info_box">
		<h1>{{photoInfo.title}}</h1>
		<p>
			<span>{{photoInfo.add_time | dateFormat('YYYY-MM-DD')}}</span>
			<span>点击{{photoInfo.click}}次</span>
		</p>
		<hr>
		<div class="thumbs">
			<vue-preview :slides="photo" @close="handleClose"></vue-preview>
			<div></div>
		</div>
			

		<hr>
		<span class="span" v-html="photoInfo.content">
			
		</span>
		<!-- 圖片 -->
		<!-- pinglun  -->
		<comment :id='id'></comment>
	</div>
</template>
<script>
	import {Toast} from 'mint-ui';
	import comment from '../comment.vue';
export default {
    name:'photo_info',
	data(){
		return{
			id:this.$route.params.id,
			photoInfo:{},
			photo:[]
		}
	},
	methods:{
		/////////////////////// 獲取圖片詳情
		getPhotoInfo(){
			this.$axios.get('/api/getimageInfo/'+this.id)
			.then(response=>{
				Toast({
					message:'獲取成功！',
					duration:500
				})
				this.photoInfo=response.data.message[0];
				// console.log(response);
			})
			.catch(error=>{
				Toast({
					message:'獲取失敗！請重新嘗試！'+error,
					duration:10000
				})
			})
			/*  */
		},
		////////////////////获取图片并做成缩略图
		getPhoto(){
			this.$axios.get('api/getthumimages/'+this.id)
			.then(response=>{
				console.log("getPhoto():"+ response.data);
				this.photo=response.data.message;
				Toast({message:'获取照片成功！'})
				this.photo.forEach(element => {
					element.w=600;
					element.h=400;
					element.msrc=element.src;
					element.src=element.src;
				});
			})
			.catch(error=>{
				console.log("getPhoto():" + error);
			})
		},
		handleClose(){
			console.log("关闭！");
		},
		//函数作用：跳转到这个网页的时候，开始位置是在最前面。
		scroll_to_top(){
			document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
            window.pageYOffset = 0;
			window.scrollTo(0,0);
		}
	},
	created() {
		this.scroll_to_top();
		this.getPhotoInfo();
		this.getPhoto();
		
	},
	components:{
		comment:comment
		// 在用子组件的时候必须注册在对应的vm实例中，不然没法用 。
	}
}
</script>
<style lang="scss" scoped>
$blue:#26a2ff;
.photo_info_box{
	margin: 0;
	padding: 3px;
	h1{
		color: $blue;
		font-size: 15px;
		text-align: center;
		margin: 5px;

	}
	p{
		color: lightgray;
		display: flex;
		justify-content:space-between;
		span{
			
		}
	}
	span.span{
		line-height: 30px;
		font-size: 15px;
	}
	
}
	

</style>